<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>06.数组版轮播图效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			.wrap {
				width: 1000px;
				height: 800px;
				background: url(./images/cleverPic/bg.jpg) no-repeat;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -500px;
				margin-top: -400px;
			}
			
			#prev,
			#next {
				position: absolute;
				width: 25px;
				height: 45px;
				background: url(./images/cleverPic/ar.png) no-repeat;
				top: 155px;
			}
			
			#prev {
				left: 13px;
			}
			
			#next {
				transform: rotate(180deg);
				right: 13px;
			}
			
			.pic {
				width: 536px;
				height: 356px;
				position: absolute;
				top: 170px;
				left: 297px;
			}
			
			img {
				vertical-align: top;
				width: 536px;
				height: 356px;
			}
			
			#txt {
				width: 536px;
				height: 71px;
				position: absolute;
				left: 297px;
				bottom: 185px;
				text-align: center;
				font: 20px/71px "微软雅黑";
				color: #666;
			}
		</style>
		<script>
			window.onload = function () {
				// 获取外层图片外框
				var oPic = document.querySelectorAll(".pic")[0];
				// 获取图片元素
				var oImg = document.querySelectorAll("#img1")[0];
				// 获取上一张元素
				var oPrevBtn = document.getElementById("prev");
				// 获取下一张元素
				var oNextBtn = document.querySelector("#next");
				// 获取这是第几张图片元素
				var oTxt = document.getElementById("txt");
				// 定义一个记录当前是第几张的变量
				var iNum = 0;
				// 定义一个定时器变量
				var iTimer = null;
				
				// 建立一个数组来存放图片 1 4 2 5 3
				var arr = ['./images/cleverPic/img1.jpg', './images/cleverPic/img4.jpg', './images/cleverPic/img2.jpg', './images/cleverPic/img5.jpg', './images/cleverPic/img3.jpg'];
				
				// 调用点击上一张的函数
				oPrevBtn.addEventListener("click", prev, false);
				
				// 调用点击下一张的函数
				oNextBtn.addEventListener("click", next, false);
				
				function prev () {
					// iNum = iNum - 1;
					// iNum -= 1;
					// 这种最暴力，哈哈！
					iNum--;
					console.log(iNum);
					// iNum不能一直-，当前只有五张，所以判断如果<=0的时候让iNum = 5重新轮播
					if ( iNum <= -1 ) {
						iNum = arr.length - 1;
					}
					
					// 这里是要执行图片切换的
					oImg.src = arr[iNum];
					oTxt.innerHTML = '这是第 <span>'+ (iNum + 1) +'</span>张图片';
				}
				
				// 下一张函数
				function next () {
					// iNum = iNum + 1;
					// iNum += 1;
					// 这种最暴力，哈哈！
					iNum++;
					console.log(iNum);
					// iNum不能一直+，当前只有五张，所以判断如果>=5的时候让iNum = 0重新轮播
					if ( iNum >= arr.length ) {
						iNum = 0;
					}
					
					// 这里是要执行图片切换的
					oImg.src = arr[iNum];		
					oTxt.innerHTML = '这是第 <span>'+ (iNum + 1) +'</span>张图片';
				}
				
				clearInterval(iTimer);
				iTimer = setInterval(next, 2000);
				
				// 鼠标移入
				oPic.addEventListener("mouseover", function () {
					clearInterval(iTimer);	
				}, false);
				
				// 鼠标移出
				oPic.addEventListener("mouseout", function () {
					clearInterval(iTimer);
					iTimer = setInterval(next, 2000);	
				}, false);
			};
		</script>
	</head>
	<body>
		<div class="wrap">
			<div class="pic">
				<a id="prev" href="javascript:;"></a>
				<img id="img1" src="./images/cleverPic/img1.jpg" alt="" />
				<a id="next" href="javascript:;"></a>
			</div>
			<p id="txt">这是第 <span>1</span>张图片</p>
		</div>
	</body>
</html>